<template>
  <div id="tutorteam">
    <div class="main">
      <Row>
        <!-- 大标题 -->
        <Col span="5" class="maxTitle titleBorder">{{tutorInfo.maxTitle}}</Col>
        <Col span="6" class="titleBorder">&nbsp</Col>
        <Col span="5" class="titleBorder">&nbsp</Col>
        <Col span="5" class="titleBorder">&nbsp</Col>
      </Row>
      <div class="content">
        <!-- 循环的行 列 -->
        <Row type="flex" justify="space-around" v-for="(first,index1) in row" :key="index1">
          <Col class="avaimage" v-for="(secound,index) in col" :key="index">
          <!-- 头像 -->
            <Avatar
              style="height:55px;width:55px;background-color: #fff;"
              size="large"
              :src="new Object(tutorInfo.tutors[index1*col+index]).avatar"
            />
            <!-- 名字和别名 -->
            <p class="avaname">{{new Object(tutorInfo.tutors[index1*col+index]).name}}</p>
            <p>{{new Object(tutorInfo.tutors[index1*col+index]).alias}}</p>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
//导入iview-ui组件
import { Row, Col, Avatar } from "view-design";

export default {
  name: "tutorteam",
  //组件注册
  components: {
    Row,
    Col,
    Avatar
  },
  //传入属性数据
  props:[
    'tutorInfo'
  ],
  data() {
    return {
      //行列变量
      row: 0,
      col: 0,
      
    };
  },
  computed: {},
  watch: {},
  methods: {
    //计算循环多少行
    computedRow() {
      let value = 0;
      if (this.tutorInfo.tutors.length % 3) {
        value = parseInt(this.tutorInfo.tutors.length / 3);
        value = value + 1;
      } else {
        value = parseInt(this.tutorInfo.tutors.length / 3);
      }

      return value;
    }
  },
  created() {
    //初始化行列变量
    this.col = 3;
    this.row = this.computedRow();

  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部UI组件修改样式 */
.main {
  margin: 30px 0 20px;
}
.maxTitle {
  border-bottom: 2px solid #33333388 !important;
  margin-left: 20px;
}

.titleBorder {
  font-size: 15px;
  border-bottom: 2px solid #e9e9e9;
  padding-bottom: 5px;
}
.content {
  margin: 18px;
  padding: 8px;
  background-color: #fff;
  font-size: 7px;
  color: #9b9b9b;
}
.avaimage {
  text-align: center;
  margin: 8px;
}
.avaname {
  font-size: 14px;
  color: #333;
  margin: 7px 0;
}
</style>